<template>
  <div class="box" v-if="imageUrl" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
    <div class="posterBox">
      <view class="poster">
			<image class="image" lazy-load show-menu-by-longpress :draggable="false" :src="imageUrl" @click="onPreviewImage"></image>
		</view>
    <div class="bottomBox">
      <div class="tit">分享到</div>
      <div class="btnBox">
        <div class="btn" @click="onShowShareSheet">
          <image src="@/static/icon_weixin.png" class="icon" />
          <p>微信好友</p>
        </div>
        <div class="btn" @click="handleDownload">
          <image src="@/static/icon_save.png" class="icon" />
          <p>保存图片</p>
        </div>
      </div>
      <div class="cancelBtn" @click="goBack">取消</div>
    </div>
    </div>
    
  </div>
</template>
<script>
import * as Api from '@/api/dealer/poster'

export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  onLoad() {
    this.getPoster()
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    getPoster() {
      const app = this
      app.isLoading = true
      Api.qrcode({
          channel: 'APP'
        })
        .then(result => {
          // api数据赋值
          app.imageUrl = result.data.imageUrl
        })
        .finally(() => app.isLoading = false)
    },
    onPreviewImage() {
      uni.previewImage({
        current: this.imageUrl,
        urls: [this.imageUrl]
      })
    },
    onShowShareSheet() {
      uni.showLoading({
        title: '打开微信中...'
      })
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 2,
        imageUrl: this.imageUrl,
        success(res) {
          console.log("success:" + JSON.stringify(res));
          uni.hideLoading()
        },
        fail(err) {
          console.log(err, 'err======');
          uni.hideLoading()
          if (err.errCode === -8) {
            app.$toast('很抱歉，您的手机没有安装微信~')
          }
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },

         // 保存海报图片
      handleDownload() {
        const app = this
        uni.showLoading({ title: '加载中' })
        // 下载海报图片
        uni.downloadFile({
          url: app.imageUrl,
          success(res) {
            console.log(res)
            uni.hideLoading()
            // 图片保存到相册
            app.onSaveImage(res.tempFilePath)
          },
          fail(res) {
            console.log('fail', res)
            uni.hideLoading()
            app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
          }
        })
      },

      // 图片保存到相册
      onSaveImage(tempFilePath) {
        const app = this
        // #ifndef H5
        uni.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success(data) {
            app.$success('保存成功')
          },
          fail(err) {
            if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
              app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
            }
          }
        })
        // #endif
        // #ifdef H5
        const names = tempFilePath.split('/')
        const fileName = names[names.length - 1]
        app.fileDownLoadForH5({ name: fileName, blob: tempFilePath })
        // #endif
      },

      // 兼容H5端下载图片
      // #ifdef H5
      fileDownLoadForH5({ name, blob }) {
        const linkElement = document.createElement('a')
        linkElement.setAttribute('href', blob)
        linkElement.setAttribute('downLoad', name)
        linkElement.click()
      },
      // #endif
  },
}
</script>
<style lang="scss" scoped>

  .box {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    .posterBox {
      box-sizing: border-box;
        width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.8);
      padding-top: 100rpx;
      display: flex;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .poster {
      width: 420.26rpx;
      height: 928rpx;
      border-radius: 24rpx;
      .image {
        width: 100%;
        height: 100%;
        border-radius: 24rpx;
      }
    }
    .bottomBox {
      position: absolute;
      width: 100%;
      bottom: 0;
      // height: 468rpx;
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      background: #FFFFFF;
      box-sizing: border-box;
      padding-top: 32rpx;
      padding-bottom: 64rpx;
      .tit {
        font-family: HarmonyOS Sans SC;
        font-size: 34rpx;
        font-weight: normal;
        line-height: 56rpx;
        text-align: center;
        letter-spacing: 0rpx;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 黑 */
        color: #000000;
      }
      .btnBox {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 48rpx;
        .btn {
          &:first-child {
            margin-right: 120rpx;
          }
          .icon {
            width: 104rpx;
            height: 104rpx;
          }
          p {
            margin-top: 16rpx;
            font-family: HarmonyOS Sans SC;
            font-size: 24rpx;
            font-weight: normal;
            line-height: 36rpx;
            color: #AAAAAA;
          }
        }
      }
      .cancelBtn {
        margin-top: 64rpx;
        text-align: center;
       /* 中 */
        font-family: HarmonyOS Sans SC;
        font-size: 30rpx;
        font-weight: normal;
        line-height: 48rpx;
        text-align: center;
        letter-spacing: 0rpx;

        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 浅灰 */
        color: #AAAAAA;
      }
    }
  }
  @media screen and (max-height: 750px) {
    .posterBox {
      padding-top: 30rpx !important;
    }
  .bottomBox {
    padding-top: 32rpx !important;
    padding-bottom: 16rpx !important;
    .btnBox {
      margin-top: 20rpx !important;
    }
    .cancelBtn {
      margin-top: 32rpx !important;
    }
  }
}
</style>